<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用Vue的非变异方法更新数组</title>
<!--引入Vue库-->
<script src="vue.js"></script>
</head>
<body>	
<div id="app">
  <div>
    <button @click="concat">concat</button>
    <button @click="slice">slice</button>
    <button @click="map">map</button>
    <button @click="filter">filter</button>
  </div>
  <ul>
    <li v-for="item in items" >
        {{ item }}
    </li>
  </ul>  
</div>
<script>
var vm = new Vue({
  el: '#app',
  data: {
    items: ['One','two','four'],
    addValue:'six'
  },
  methods:{
    concat(){
      this.items =  this.items.concat(this.addValue)
    },
    slice(){
      this.items =  this.items.slice(1)
    },
    map(){
      this.items =  this.items.map(function(item,index,arr){
        return index + item; 
      })
    },
    filter(){
      this.items =  this.items.filter(function(item,index,arr){
        return (index > 0); 
      })
    }
  }
})
</script>
</body>
</html>
